<div class="user-settings-page crayons-layout crayons-layout--limited-l gap-0">
  <div class="crayons-card min-w-0 text-padding">
    <h2 class="crayons-title mb-4"><%= t("views.settings.destroy.heading") %></h2>
    <div class="settings-form">
        <%= form_tag user_full_delete_path, method: :delete, autocomplete: "off", id: "delete__account", class: "grid gap-4 mb-4" do %>
          <%= t("views.settings.destroy.desc") %>
          <ul class="my-0 ml-6 list-disc">
            <li><%= t("views.settings.destroy.desc_1_html", twitter: link_to(t("views.settings.destroy.twitter"), "https://twitter.com/settings/applications"), github: link_to(t("views.settings.destroy.github"), "https://github.com/settings/applications")) %>
            </li>
            <%# TODO: expand the delete messaging later %>
            <li><%= t("views.settings.destroy.desc_2") %></li>
            <li><%= t("views.settings.destroy.desc_3") %></li>
          </ul>
          <h3><%= t("views.settings.destroy.to_delete") %></h3>
        <div class="crayons-field m:w-50">
          <label for="delete__account__username__field" class="crayons-field__label">
            <%= t("views.settings.destroy.type") %>
          </label>
          <input type="text" name="delete__account__username__field" class="crayons-textfield " id="delete__account__username__field" placeholder="<%= t("views.settings.destroy.username") %>">
        </div>
        <div class="crayons-field m:w-50">
          <label for="delete__account__verification__field" class="crayons-field__label">
            <%= t("views.settings.destroy.confirm_html", word: t("views.settings.destroy.word")) %>
          </label>
          <input type="text" name="delete__account__verification__field" class="crayons-textfield" id="delete__account__verification__field">
        </div>
        <div>
          <button class="crayons-btn crayons-btn--danger" id="delete__account__btn" type="submit" disabled="true">
            <%= t("views.settings.destroy.submit") %>
          </button>
        </div>
        <% end %>
      <script>
        const deleteAccountBtn = document.getElementById('delete__account__btn');
        const deleteAccountUsernameInput = document.getElementById('delete__account__username__field');
        const deleteAccountVerificationInput = document.getElementById('delete__account__verification__field');
        function bothInputsVerified() {
          return deleteAccountUsernameInput.value === '<%= @user.username %>' && deleteAccountVerificationInput.value === "<%= t("views.settings.destroy.word") %>";
        }
        const disableDeleteAccountBtn = () => { deleteAccountBtn.disabled = !bothInputsVerified() };
        deleteAccountUsernameInput.addEventListener('input', disableDeleteAccountBtn);
        deleteAccountVerificationInput.addEventListener('input', disableDeleteAccountBtn);
      </script>
      <p>
        <%= t("views.settings.destroy.ghost_html", ghost: link_to("@ghost", "/ghost"), click: contact_link(text: t("views.settings.destroy.click"), additional_info: { subject: "Request Account Deletion", body: @email_body })) %>
      </p>

      <p>
        <%= t("contact_prompts.if_any_questions_html") %>
      </p>
    </div>
  </div>
</div>
